<template>
  <div class="manualOrderDetail">
    <c-title :hide="false" text="查看详情"></c-title>
    <div class="rowBox flex_c_s">
      <div class="row_text">{{ infoData.realname }} ({{ infoData.mobile }})</div>
      <div class="row_text">地址：{{ infoData.address }}</div>
    </div>
    <div class="rowBox flex_c">
      <div class="rowBox_second" v-for="(item, ind) in infoData.order_goods" :key="ind">
        <div class="cate">{{ item.category_name }}</div>
        <div class="goodDetail">
          <div class="image">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="goodDetail_r">
            <div class="goodsDetail_r_t">
              <div class="title">{{ item.title }}</div>
              <span style="text-align: left;" v-if="item.goods_option_tile" >规格:{{item.goods_option_tile}}</span>
              <div class="total">×{{ item.total }}</div>
            </div>
            <div class="price">
              ￥{{ item.price }}
              <i class="iconfont icon-a-beizhu2" @click="showRemark(item.remark)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rowBox flex_c">
      <div class="rowLine">
        <div class="rwo_l">订单编号：</div>
        <div class="rwo_r">{{ infoData.order_sn }}</div>
      </div>
      <div class="rowLine">
        <div class="rwo_l">状态：</div>
        <div class="rwo_r redC">{{ infoData.status_name }}</div>
      </div>
      <div class="rowLine" v-if="infoData.is_prepay">
        <div class="rwo_l">预付款金额：</div>
        <div class="rwo_r">{{ infoData.prepay_price }}</div>
      </div>
      <div class="rowLine" v-if="infoData.is_prepay">
        <div class="rwo_l">预付款通道：</div>
        <div class="rwo_r">{{ infoData.prepay_type_name }}</div>
      </div>
      <div class="rowLine">
        <div class="rwo_l">总价金额：</div>
        <div class="rwo_r">{{ infoData.price }}</div>
      </div>
      <div class="rowLine">
        <div class="rwo_l">应收金额：</div>
        <div class="rwo_r">{{ infoData.pay_price }}</div>
      </div>
    </div>
    <div class="rowBox flex_c">
      <div class="rowLine">
        <div class="rwo_l">订单提交人：</div>
        <div class="rwo_r">{{ infoData.order_submitter }}</div>
      </div>
      <div class="rowLine">
        <div class="rwo_l">订单质检员：</div>
        <div class="rwo_r">{{ infoData.quality_inspector }}</div>
      </div>
      <div class="rowLine">
        <div class="rwo_l">订单仓管员：</div>
        <div class="rwo_r">{{ infoData.warehouse_keeper }}</div>
      </div>
      <div class="rowLine" v-for="order in infoData.remarks" :key="order.id">
        <div class="rwo_l">{{ order.remark_type_name }}:</div>
        <div class="rwo_r">{{ order.remark }}</div>
      </div>
    </div>
    <div class="rowBox flex_c">
      <div class="rowLine" v-for="time in infoData.created_many" :key="time.id">
        <div class="rwo_l">{{ time.created_at_name }}：</div>
        <div class="rwo_r">{{ time.created_at }}</div>
      </div>
    </div>
    <div class="rowBox flex_c">
      <div class="rowLine" v-for="(item, ind) in infoData.form_data" :key="ind">
        <div class="rwo_l">{{ item[0] }}：</div>
        <div class="rwo_r">{{ item[1] }}</div>
      </div>
    </div>
    <!-- <div class="rowBox">
      自定义表单内容未对接

    </div> -->
    <div class="btnBox">
      <div @click="processor(btn)" v-if="btn.api" :class="[btn.name == '通过' ? 'btn redB' : 'btn bd']" v-for="(btn, indx) in infoData.button_models" :key="indx">{{ btn.name }}</div>
    </div>
    <textAreaPopup :popupObj="popupObj" v-model="show" @childPost="childPost" @subPost="subPost"></textAreaPopup>
    <van-popup v-model="priceShow" closeable round @click-close-icon="closePop">
      <div class="priceShowBox">
        <div class="title">价格备注</div>
        <div class="txt">{{ priceRemark }}</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import textAreaPopup from "./components/textAreaPopup.vue";
export default {
  data() {
    return {
      show: false,
      popupObj: {
        title: "",
        api: ""
      },
      infoData: [],
      priceShow: false,
      priceRemark: ""
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    openOption() {
      this.popupObj.title = "审核驳回备注";
      this.show = true;
    },
    childPost(e) {
      this.show = e;
      this.popupObj.title = "";
      this.popupObj.api = "";
      this.popupObj.params = {};
    },
    subPost(e) {
      this.childPost(e);
      this.getData();
    },
    async getData() {
      let data = await $http.post("plugin.manual-order.frontend.order.detail", { manual_order_id: this.$route.params.manual_order_id });
      console.log(data);
      if (data.result) {
        this.infoData = data.data;
      } else {
        this.$toast(data.msg);
      }
    },
    showRemark(remark) {
      this.priceShow = true;
      this.priceRemark = remark;
    },
    closePop() {
      this.priceShow = false;
    },
    processor(btn) {
      console.log(btn)
      this.show = true;
      if(btn.name == '通过' || btn.name == '驳回'){
        this.popupObj.title = `审核${btn.name}备注`;
      }else{
        this.popupObj.title = `${btn.name}备注`;
      }
      this.popupObj.api = btn.api;
      if (btn.params) {
        this.popupObj.params = btn.params;
      }
    }
  },
  components: {
    textAreaPopup
  }
};
</script>
<style lang="scss" scoped>
.priceShowBox {
  min-width: 15.63rem;
  padding: 1.13rem 1.69rem;
  .title {
    margin-bottom: 0.91rem;
    font-weight: 500;
    font-size: 1rem;
  }
  .txt{
    font-size: 0.8rem;
    text-align: left;
  }
}
.btnBox {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
  justify-content: flex-end;
  padding: 0.28rem 0.75rem;
  box-sizing: border-box;
  .btn {
    font-size: 0.94rem;
    color: #000;
    padding: 0.78rem 1.78rem;
    box-sizing: border-box;
    border-radius: 1.28rem;
    line-height: 1rem;
    // margin-right: 0.75rem;
    margin-right: 0.5rem;
  }
  .btn:last-child {
    margin-right: 0;
  }
  .redB {
    color: #fff;
    background: #fe5e56;
  }
  .bd {
    border: 1px solid #707070;
  }
}
.manualOrderDetail {
  padding: 0.75rem 0.63rem;
  padding-bottom: 4rem;
  box-sizing: border-box;
  .flex_c {
    display: flex;
    flex-direction: column;
  }
  .flex_c_s {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .rowBox {
    padding: 0.91rem 0.75rem;
    border-radius: 0.5rem;
    background: #fff;
    display: flex;
    margin-bottom: 0.63rem;
    .rowLine {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.88rem;
      margin-bottom: 0.94rem;
      line-height: 0.88rem;
      .rwo_l {
        color: #909090;
      }
      .redC {
        color: red;
      }
    }
    .rowLine:last-child {
      margin-bottom: 0px;
    }

    .row_text {
      font-size: 0.88rem;
    }
    .rowBox_second {
      flex: 1;
      margin-bottom: 0.94rem;
      .cate {
        width: 100%;
        text-align: left;
        padding: 0.75rem;
        background: #f5f5f5;
        border-radius: 0.25rem;
        font-size: 0.81rem;
      }
      .goodDetail {
        display: flex;
        margin-top: 0.75rem;
        .image {
          width: 5.81rem;
          height: 5.81rem;
          border-radius: 0.5rem;
          margin-right: 0.66rem;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .goodDetail_r {
          padding: 0.5rem 0 0.63rem 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .goodsDetail_r_t {
            text-align: left;
            .title {
              font-size: 0.94rem;
              font-weight: 500;
            }
            .total {
              font-size: 0.81rem;
              line-height: 0.81rem;
              margin-top: 0.5rem;
            }
          }
          .price {
            display: flex;
            align-items: center;
            .icon-a-beizhu2 {
              color: #cccccc;
              font-size: 1rem;
              margin-left: 0.3rem;
            }
          }
        }
      }
    }
  }
}
</style>
